<template>
  <div class="app-container">
    <div slot="header" class="clearfix"></div>
    <div>
      <div>
  <div style="margin-top: 20px">
    <el-row >
  <el-button  type="info" :loading="isScanLoading" plain icon="el-icon-circle-plus-outline" v-hasPermi="['cmdb:asset:add:post']" @click="on_scan()">资产扫描</el-button>

              <el-input
          id="search_input"
          ref="search_input"
          :autofocus="is_focus"
          :trigger-on-focus="false"
          :suffix-icon="search_input_icon"
          @focus="on_focus"
          :fetch-suggestions="history_filter"
          select-when-unmatched
          @keyup.enter.native="on_search()"
          placeholder="示例：(hostname:huawei* AND price:[20000 TO 40000]) 更多请参阅Lucene语法"
          v-model="query"
          style="width: 90%"
        >


          <el-button
            id="submit"
            @click="on_search()"
            slot="append"
            icon="el-icon-search"
            :loading="loading"
          ></el-button>

              </el-input>
    </el-row>
  </div>


      </div>

      <div
        style="
          border: 1px #dcdfe6 solid;
          margin: 10px 0px;
          width: 100%;
          overflow-x: auto;
        "
      >
        <el-table
          :data="data"
          border
          highlight-current-row
          @current-change="handleCurrentChange"
          :header-cell-style="{ 'text-align': 'center' }"
          v-loading="loading"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
          style="width: 100%"
          @filter-change="filterHandler"
        >
          <el-table-column fixed="right" label="操作" width="220" align="center">
            <template slot-scope="scope">
              <ul style="white-space: nowrap; margin: 0px; padding: 0px;">
                                <li
                  style="
                    display: inline-block;
                    border: 0px solid #e4e7ed;
                    padding: 2px;
                  "
                >
                            <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="on_add(scope.row)"
                v-hasPermi="['cmdb:asset:updatedata:put']"
              >添加
              </el-button>
                </li>
                                <li
                  style="
                    display: inline-block;
                    border: 0px solid #e4e7ed;
                    padding: 2px;
                  "
                >
                
                                          <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                    @click="on_delete(scope.row)"
                v-hasPermi="['admin:system:operlog:get']"
              >删除
              </el-button>
                </li>
              </ul>
            </template>
          </el-table-column>
          <el-table-column type="index" label="序号" width="50" align="center">
          </el-table-column>

          <el-table-column
            label="IP地址"
            width="140"
            align="center"
          >
           <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row._source.jb.ip
              }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="MAC地址"
            width="180"
            align="center"
          >
                      <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row._source.jb.mac
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="系统版本"
            align="center"
          >
                      <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row._source.jb.os
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="在线状态" width="100" align="center">
            <template slot-scope="scope">
             {{scope.row._source.jb.online}}
              <!-- <el-tag type="warning" effect="dark">离线</el-tag>
  <el-tag type="danger" effect="dark">下架</el-tag> -->
            </template>
          </el-table-column>
          <el-table-column label="审核状态" width="100" align="center" column-key="audit">
            <template slot-scope="scope">
             {{scope.row._source.jb.audit}}
            </template>
          </el-table-column>

        </el-table>
      </div>
      <el-pagination
        style="float: right; margin-right: 100px"
        background
        layout="total, prev, pager, next"
        :page-size="page_size"
        :total="total_num"
        :current-page.sync="current_page"
        @current-change="on_page_change"
      >
      </el-pagination>
    </div>
    <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body @close="submitForm">
      <FileUpload ref="saveFile" :file-type="['ALL']" @input="submitForm"></FileUpload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">完 成</el-button>
      </div>
    </el-dialog>

    <el-dialog title="导入导出" :visible.sync="importVisible" width="300px">
<el-button type="" @click="xls_outport" icon="el-icon-s-fold">导出文件</el-button>
<el-button type="" @click="xls_import" icon="el-icon-s-unfold">导入文件</el-button>

</el-dialog>
  </div>
</template>

<script>
import { listDiscovery,addDiscovery,updateDiscovery,delDiscovery,listScan } from "@/api/vadmin/cmdb/discovery"
import { searchdata } from "@/api/vadmin/cmdb/data"
import { getToken } from '@/utils/auth'

export default {
  name: "discovery",
  components: {
  },
  data: () => {
    return {
      Scan_BASE_URL:process.env.VUE_APP_BASE_API,
      data: [],
      importVisible:false,
      isScanLoading:false,
      title:"",
      open:false,
      tables:[],
      total_num:0,
      page_size:10,
      radio2: '筛选资产',
      loading:false,
      current_page:1,
      indices: [],
      is_focus: true,
      temp_data:[],
      c_key:"",
      search_input_icon: "el-icon-edit",
      query:"",
    
    };
  },
  created(){
  },
  mounted() {
     this.getList()
  },
  methods: {
    async getList(query) {
        listDiscovery({page:1}).then(response=>{
          console.log(response)
            this.data=response.msg.hits.hits
                    this.total_num =response.msg.hits.total
      });
    },    
    on_search(){
          var query_data={"index":"discovery","data":{"page_size":10,
                "page":1,
                "query":this.query
                }}
          searchdata(query_data).then(response=>{
           this.data=response.msg.hits.hits
           this.total_num =response.msg.hits.total
          })
    },
    on_show_info(){

    },
    handleCurrentChange(){

    },
    history_filter(){

    },
    on_page_change(){
        listDiscovery({page:this.current_page}).then(response=>{
            this.data=response.msg.hits.hits
                    this.total_num =response.msg.hits.total
        })
    },
    on_focus(){

    },

    xls_import(){
            this.open = true;
    },
        xls_outport(){
          console.log(`${process.env.VUE_APP_BASE_API}/admin/data/xls/`)
          window.open(`${process.env.VUE_APP_BASE_API}/admin/data/xls/`);
              // this.download(`${process.env.VUE_APP_BASE_API}/admin/data/xls/`,"xls_moulde.xls")
   
    },
    on_delete(data){
      var query={}
      query["_index"]=data["_index"]
      query["_id"]=data["_id"]
      this.$confirm("确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
        delDiscovery(query).then(response=>{
           this.msgSuccess("删除成功！")
           this.getList()
        }).catch(error => {});
          });
    },
    on_add(data){
      console.log(">>>>>>>>>>>>",data)
      localStorage.setItem('items', JSON.stringify(data));
      this.$router.push({ path: '/cmdb/discovery/add',name:'AutoAddDATA'})
      // this.$refs.childUpdateData.on_show(true,data,false);

    },
    async on_scan(){
      this.isScanLoading=true
       await this.$axios({    
          method:'GET',
          url:`${this.Scan_BASE_URL}/admin/data/scan/`,　　　　　　　　//利用了字符串模板来携带id
          headers:{
                  'Authorization':'Bearer ' + getToken()　　　　//由于是多页面应用所以token存储在本地localStorage中
              }
      }).then(res => {
        this.isScanLoading=false
         console.log(res)
      //获取你需要用到的数据
      })
    },

          /** 完成按钮 */
      submitForm: function () {
        this.open = false;
        this.$refs.saveFile.fileList = []
      },
    filterHandler(data){
      if (data.audit[0]==undefined){
        this.query=""
      }else{
        this.query=data.audit[0]
      }
        this.on_search()
            console.log("fffffffffffff",data.audit[0])

    },


  },
};
</script>
